<template>
  <div style="text-align: left">
    <new-group/>&nbsp;
    <question-rule/>
  </div>
  <el-table lazy :data="groupData" style="width: 100%" v-loading="loading">
    <el-table-column type="expand">
      <template #default="props">
        <el-form>
          <el-form-item v-for="(question, index) in props.row['questions']" :key="index" style="margin-bottom: 0">
            <el-row style="text-align: left">
              <el-col>
                <el-tag>{{ props.row['questionTypeName'] }}</el-tag>&nbsp;
                <el-tag type="success">{{ props.row['groupName'] }}</el-tag>&nbsp;
                <el-tag type="info">{{ question['score'] }} 分</el-tag>&nbsp;
              </el-col>
              <el-col>
                {{ index + 1 }}.{{ convertType(question.type) }}{{
                  question.title
                }}{{ question['remark'] !== null && question['remark'] !== '' ? '注：' + question['remark'] : '' }}
                <div style="text-align: center">
                  <el-checkbox-group v-if="question.type === 1" v-model="question.answer" disabled>
                    <el-checkbox v-for="(option, index) in question.options" :key="index"
                                 :label="option.order.toString()">
                      {{ option.content }}
                    </el-checkbox>
                  </el-checkbox-group>
                  <el-radio-group v-else-if="question.type === 0" v-model="question.answer[0]" disabled>
                    <el-radio v-for="(option, index) in question.options" :key="index" :label="option.order.toString()">
                      {{ option.content }}
                    </el-radio>
                  </el-radio-group>
                  <el-radio-group v-else v-model="question.answer[0]" disabled>
                    <el-radio label="0">错</el-radio>
                    <el-radio label="1">对</el-radio>
                  </el-radio-group>
                </div>
              </el-col>
              <el-col>
                创建时间：{{ question['createTime'] }}
              </el-col>
              <el-col>
                修改时间：{{ question['updateTime'] }}
              </el-col>
              <el-col>
                <edit-question :question="question" :groups="groupData"/>
                <el-button size="small" type="danger" @click="questionDelete(question.questionId)">删除</el-button>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="groupName" label="题组名称" width="160"/>
    <el-table-column prop="questionTypeName" label="题组类型" width="100"/>
    <el-table-column prop="questionTotal" label="题目数量" width="100"/>
    <el-table-column prop="remark" label="备注" width="190"/>
    <el-table-column prop="createTime" label="创建时间" width="180"/>
    <el-table-column prop="updateTime" label="更新时间" width="180"/>
    <el-table-column label="操作">
      <template #default="scope">
        <new-question :groupId="scope.row['questionGroupId']" :groups="groupData"/>
        <edit-group :data="scope.row"/>&nbsp;
        <el-button size="large" type="danger" @click="groupDelete(scope.row['questionGroupId'])">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { deleteGroup, deleteQuestion, groupList, questionList } from '@/api/admin'
import { inject, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import NewGroup from './question/NewGroup.vue'
import NewQuestion from './question/NewQuestion.vue'
import QuestionRule from './question/QuestionRule.vue'
import EditGroup from './question/EditGroup.vue'
import EditQuestion from './question/EditQuestion.vue'

const reload: any = inject('reload')
const groupData: any = ref(null)
const convertType = (type: number) => {
  switch (type) {
    case 0:
      return '（单选）'
    case 1:
      return '（多选）'
    case 2:
      return '（判断）'
  }
}
const questionDelete = (questionId: number) => {
  ElMessageBox.confirm(
    '确认删除题目？',
    '确认删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    deleteQuestion(questionId).then(() => {
      ElMessage.success('删除成功')
      reload()
    })
  })
}
const groupDelete = (groupId: number) => {
  ElMessageBox.confirm(
    '确认删除题组？这将同时删除题组下的所有题目。',
    '确认删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    deleteGroup(groupId).then(() => {
      ElMessage.success('删除成功')
      reload()
    })
  })
}
const loading = ref(true)
groupList().then(resp => {
  groupData.value = resp.data.data
  for (const index in groupData.value) {
    questionList(groupData.value[index].questionGroupId).then(resp => {
      groupData.value[index].questions = resp.data.data
      for (const i in groupData.value[index].questions) {
        groupData.value[index].questions[i].answer = groupData.value[index].questions[i].answer.split(',')
      }
    }).finally(() => {
      loading.value = false
    })
  }
})
</script>

<style scoped>

</style>
